<template>
    <div class="card">
        <div class="card-body">
            <div class="left-box">
                <div class="icon" :style="`--icon: url(${ icon })`"></div>
            </div>
            <div class="right-box">
                <div class="title">{{ title }}</div>
                <div class="sub-title">{{ subTitle }}</div>
            </div>
        </div>
    </div>
</template>

<script setup>
defineProps({
    title: { type: String,  default: '' },
    subTitle: { type: String,  default: '' },
    icon: { type: String,  default: '' },
});
</script>

<style scoped lang="less">
.card {
    box-sizing: border-box;
    width: 10vw;
    height: 4.5vw;
    padding: 1vw;
    
    .card-body {
        display: flex;
        align-items: center;
        gap: 1vw;
        
        .left-box {
            --size: 2vw;
            width: var(--size);
            height: var(--size);
            
            .icon {
                --w: 100%;
                --h: 100%;
            }
        }

        .right-box {
            flex: 1;

            .title {
                font-size: 0.9vw;
                font-weight: 500;
            }

            .sub-title {
                font-size: 0.8vw;
                color: #666;
            }
        }
    }
}
</style>